<template>
  <div class="video-detail-container">
    <!-- 视频播放区域 -->
    <div class="video-player-wrapper">
      <VideoPlayer 
        :video-id="videoId" 
      />
    </div>

    <!-- 视频内容区域 -->
    <div class="video-content">
      <!-- 左侧视频信息 -->
      <div class="video-main-content">
        <!-- 视频标题和互动区 -->
        <div class="video-header">
          <h1 class="video-title">{{ video.title }}</h1>
          <div class="video-stats">
            <span class="view-count">播放量：{{ formatNumber(video.views) }}</span>
            <span class="bullet">•</span>
            <span class="publish-date">发布于 {{ video.publishDate }}</span>
          </div>
        </div>

        <!-- 视频互动操作区 - 使用组件 -->
        <VideoActions 
          :video="video" 
          :is-liked="isLiked"
          :is-coined="isCoined"
          :is-collected="isCollected"
          @toggle-like="toggleLike"
          @toggle-coin="toggleCoin"
          @toggle-collect="toggleCollect"
          @share-video="shareVideo"
        />

        <!-- 视频分割线 -->
        <div class="divider"></div>

        <!-- UP主信息 - 使用组件 -->
        <UpInfo 
          :author="{ name: video.author, avatar: video.authorAvatar, followers: video.authorFollowers }" 
          :is-following="isFollowing"
          @toggle-follow="toggleFollow"
        />

        <!-- 视频分割线 -->
        <div class="divider"></div>

        <!-- 视频简介 - 使用组件 -->
        <VideoDescription 
          :description="video.description" 
          :is-expanded="isDescriptionExpanded"
          @toggle-description="toggleDescription"
        />

        <!-- 视频分割线 -->
        <div class="divider"></div>

        <!-- 评论区 -->
        <div class="comments-section">
          <div class="comments-header">
            <h2>评论区 ({{ formatNumber(video.commentsCount) }})</h2>
          </div>

          <!-- 评论输入框 - 使用组件 -->
        <CommentInput 
          :current-user="currentUser"
          @submit-comment="submitComment"
        />

          <!-- 评论列表 - 使用组件 -->
        <CommentList 
          :comments="comments"
          :current-user="currentUser"
          @like-comment="likeComment"
          @reply-comment="replyComment"
          @show-more-replies="showMoreReplies"
          @load-more-comments="loadMoreComments"
        />
        </div>
      </div>

      <!-- 右侧推荐视频 -->
      <div class="recommended-videos">
        <h3>推荐视频</h3>
        <div v-for="recVideo in recommendedVideos" :key="recVideo.id" class="recommended-video-item">
          <div class="rec-video-thumbnail">
            <img :src="recVideo.thumbnail" alt="推荐视频缩略图">
            <span class="rec-video-duration">{{ formatDuration(recVideo.duration) }}</span>
          </div>
          <div class="rec-video-info">
            <div class="rec-video-title">{{ recVideo.title }}</div>
            <div class="rec-video-author">{{ recVideo.author }}</div>
            <div class="rec-video-stats">{{ formatNumber(recVideo.views) }}播放</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VideoPlayer from '../components/VideoPlayer.vue'
import VideoActions from '../components/VideoActions.vue'
import UpInfo from '../components/UpInfo.vue'
import VideoDescription from '../components/VideoDescription.vue'
import CommentInput from '../components/CommentInput.vue'
import CommentList from '../components/CommentList.vue'
import { useRouter, useRoute } from 'vue-router'

export default {
  name: 'VideoDetailView',
  components: {
    VideoPlayer,
    VideoActions,
    UpInfo,
    VideoDescription,
    CommentInput,
    CommentList,
  },
  data() {
    return {
      videoId: '',
      video: {
        id: '',
        title: '【原神】4.4版本新角色「若陀龙王」详细攻略',
        url: 'https://vjs.zencdn.net/v/oceans.mp4',
        thumbnail: 'https://placehold.co/1280x720/FB7299/FFFFFF?text=原神攻略',
        duration: 325,
        views: 125000,
        likes: 5800,
        coins: 3200,
        collections: 2400,
        publishDate: '2023-12-15',
        author: '原神攻略组',
        authorAvatar: 'https://placehold.co/40x40/FB7299/FFFFFF?text=原',
        authorFollowers: 150000,
        description: '# 若陀龙王详细攻略\n\n## 角色介绍\n\n若陀龙王是原神4.4版本即将推出的新角色，作为岩系输出天花板，拥有强大的爆发能力和群体控制效果。\n\n## 技能解析\n\n### 元素战技 - 龙鳞护盾\n- 为自身提供强大的护盾，吸收大量伤害\n- 护盾存在期间，提升元素伤害\n\n### 元素爆发 - 龙吟九霄\n- 召唤龙形岩元素力量，对周围敌人造成巨额伤害\n- 对处于护盾保护下的敌人造成额外伤害\n\n## 阵容搭配\n\n推荐阵容：\n1. 若陀龙王 + 钟离 + 行秋 + 万叶\n2. 若陀龙王 + 阿贝多 + 雷电将军 + 班尼特\n\n## 圣遗物推荐\n\n- 套装：逆飞的流星4件套\n- 主属性：沙漏-攻击力%，杯子-岩元素伤害加成，头冠-暴击伤害\n- 副词条：暴击伤害 > 暴击率 > 攻击力% > 元素充能效率\n\n## 武器推荐\n\n1. 护摩之杖\n2. 决斗之枪\n3. 流月针\n\n喜欢这个视频的话，别忘了一键三连支持哦！感谢大家的观看！',
        commentsCount: 1250,
      },
      comments: [
        {
          id: 1,
          username: '旅行者',
          userAvatar: 'https://placehold.co/40x40/23ADE5/FFFFFF?text=旅',
          content: '太详细了！感谢UP主的攻略，正好准备抽若陀龙王！',
          time: '2小时前',
          likes: 560,
          replies: [
            {
              id: 101,
              username: '原神攻略组',
              content: '不客气，祝您抽到想要的角色！',
            },
            {
              id: 102,
              username: '萌新一只',
              content: '请问零氪党值得抽吗？',
            },
          ],
        },
        {
          id: 2,
          username: '岩王帝君',
          userAvatar: 'https://placehold.co/40x40/9C27B0/FFFFFF?text=岩',
          content: '钟离+若陀龙王的组合确实很强，护盾无缝衔接！',
          time: '4小时前',
          likes: 320,
          replies: [],
        },
        {
          id: 3,
          username: '强度党',
          userAvatar: 'https://placehold.co/40x40/4CAF50/FFFFFF?text=强',
          content: '护摩之杖对若陀龙王提升真的很大，建议有条件的玩家入手！',
          time: '6小时前',
          likes: 280,
          replies: [],
        },
        {
          id: 4,
          username: '二次元爱好者',
          userAvatar: 'https://placehold.co/40x40/FF9800/FFFFFF?text=二',
          content: '若陀龙王的建模太帅了，技能特效也很炫酷！',
          time: '8小时前',
          likes: 420,
          replies: [],
        },
        {
          id: 5,
          username: '新手玩家',
          userAvatar: 'https://placehold.co/40x40/F44336/FFFFFF?text=新',
          content: '请问新手玩家适合培养若陀龙王吗？资源有限...',
          time: '10小时前',
          likes: 150,
          replies: [
            {
              id: 501,
              username: '原神攻略组',
              content: '新手玩家建议优先培养基础角色，若陀龙王可以后期再考虑。',
            },
          ],
        },
      ],
      recommendedVideos: [
        {
          id: 101,
          title: '【原神】4.4版本最新角色抽卡建议',
          thumbnail: 'https://placehold.co/320x180/23ADE5/FFFFFF?text=抽卡建议',
          duration: 240,
          views: 98000,
          author: '原神攻略组',
        },
        {
          id: 102,
          title: '【原神】钟离完全培养指南',
          thumbnail: 'https://placehold.co/320x180/9C27B0/FFFFFF?text=钟离攻略',
          duration: 360,
          views: 145000,
          author: '岩王粉丝团',
        },
        {
          id: 103,
          title: '【原神】4.4版本深渊12层满星攻略',
          thumbnail: 'https://placehold.co/320x180/4CAF50/FFFFFF?text=深渊攻略',
          duration: 420,
          views: 87000,
          author: '原神竞速玩家',
        },
        {
          id: 104,
          title: '【原神】若陀龙王剧情解析',
          thumbnail: 'https://placehold.co/320x180/FF9800/FFFFFF?text=剧情解析',
          duration: 480,
          views: 112000,
          author: '原神剧情党',
        },
        {
          id: 105,
          title: '【原神】2024年必练角色推荐',
          thumbnail: 'https://placehold.co/320x180/F44336/FFFFFF?text=角色推荐',
          duration: 540,
          views: 156000,
          author: '原神策划组',
        },
      ],
      newComment: '',
      isLiked: false,
      isCoined: false,
      isCollected: false,
      isFollowing: false,
      isDescriptionExpanded: false,
      currentUser: null,
    }
  },
  computed: {
    // 格式化视频简介，支持Markdown语法
    formattedDescription() {
      let description = this.description
      
      // 将Markdown标题转换为HTML
      description = description.replace(/#{1,6}\s+(.*?)(\n|$)/g, '<h3>$1</h3>')
      // 将换行符转换为<br>
      description = description.replace(/\n/g, '<br>')
      // 将列表项转换为HTML
      description = description.replace(/^-\s+(.*?)(\n|$)/gm, '<span class="list-item">• $1</span><br>')
      
      return description
    },
    // 获取当前需要显示的简介内容
    description() {
      if (this.isDescriptionExpanded) {
        return this.video.description
      }
      return this.video.description.length > 150 
        ? this.video.description.substring(0, 150) + '...' 
        : this.video.description
    },
  },
  created() {
    const route = useRoute()
    this.videoId = route.params.id || '1'
    this.currentUser = JSON.parse(localStorage.getItem('currentUser'))
  },
  methods: {
    // 格式化数字，添加单位
    formatNumber(num) {
      if (num >= 10000) {
        return (num / 10000).toFixed(1) + '万'
      }
      if (num >= 1000) {
        return (num / 1000).toFixed(1) + '千'
      }
      return num.toString()
    },
    
    // 格式化时长
    formatDuration(seconds) {
      const minutes = Math.floor(seconds / 60)
      const remainingSeconds = seconds % 60
      return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
    },
    
    // 点赞视频
    toggleLike() {
      this.isLiked = !this.isLiked
      this.video.likes += this.isLiked ? 1 : -1
    },
    
    // 投币视频
    toggleCoin() {
      this.isCoined = !this.isCoined
      this.video.coins += this.isCoined ? 1 : -1
    },
    
    // 收藏视频
    toggleCollect() {
      this.isCollected = !this.isCollected
      this.video.collections += this.isCollected ? 1 : -1
    },
    
    // 分享视频
    shareVideo() {
      // 在实际应用中，这里应该调用分享API
      alert('分享功能已触发！')
    },
    
    // 关注/取消关注UP主
    toggleFollow() {
      this.isFollowing = !this.isFollowing
      this.video.authorFollowers += this.isFollowing ? 1000 : -1000
      alert(this.isFollowing ? '关注UP主成功' : '取消关注UP主成功')
    },
    
    // 展开/收起视频简介
    toggleDescription() {
      this.isDescriptionExpanded = !this.isDescriptionExpanded
    },
    
    // 提交评论
    submitComment() {
      if (!this.newComment.trim()) return
      
      const newComment = {
        id: this.comments.length + 1,
        username: this.currentUser ? this.currentUser.username : '游客',
        userAvatar: this.currentUser ? this.currentUser.avatar : 'https://placehold.co/40x40/CCCCCC/FFFFFF?text=游客',
        content: this.newComment,
        time: '刚刚',
        likes: 0,
        replies: [],
      }
      
      this.comments.unshift(newComment)
      this.video.commentsCount++
      this.newComment = ''
    },
    
    // 点赞评论
    likeComment(commentId) {
      const comment = this.comments.find(c => c.id === commentId)
      if (comment) {
        comment.likes++
      }
    },
    
    // 回复评论
    replyComment(commentId) {
      const comment = this.comments.find(c => c.id === commentId)
      if (comment) {
        const replyContent = prompt('请输入回复内容：')
        if (replyContent && replyContent.trim()) {
          const newReply = {
            id: Date.now(),
            username: this.currentUser ? this.currentUser.username : '游客',
            content: replyContent.trim(),
          }
          if (!comment.replies) comment.replies = []
          comment.replies.push(newReply)
        }
      }
    },
    
    // 加载更多评论
    loadMoreComments() {
      // 模拟加载更多评论
      const moreComments = [
        {
          id: this.comments.length + 1,
          username: '资深玩家',
          userAvatar: 'https://placehold.co/40x40/795548/FFFFFF?text=资',
          content: '若陀龙王的元素爆发伤害真的很高，配合钟离的护盾效果完美！',
          time: '12小时前',
          likes: 156,
          replies: [],
        },
        {
          id: this.comments.length + 2,
          username: '收集党',
          userAvatar: 'https://placehold.co/40x40/E91E63/FFFFFF?text=收',
          content: '不管强度如何，这么帅的角色必须抽！',
          time: '1天前',
          likes: 203,
          replies: [],
        },
      ]
      this.comments = [...this.comments, ...moreComments]
    },
    
    // 显示更多回复
    showMoreReplies(commentId) {
      const comment = this.comments.find(c => c.id === commentId)
      if (comment && comment.replies && comment.replies.length > 2) {
        // 在实际应用中，这里应该展开所有回复
        alert(`查看全部 ${comment.replies.length} 条回复`)
      }
    },
  },
}
</script>

<style scoped>
.video-detail-container {
  min-height: 100vh;
  background-color: var(--bg-color);
}

/* 视频播放区域 */
.video-player-wrapper {
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 480px;
  width: 100%;
}

/* 视频内容区域 */
.video-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  padding: 20px;
}

/* 左侧视频信息 */
.video-main-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 视频标题和互动区 */
.video-header h1 {
  font-size: 24px;
  font-weight: bold;
  color: var(--text-color);
  line-height: 1.4;
}

.video-stats {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.bullet {
  color: var(--text-secondary);
}

/* 视频互动操作区 */
.video-actions {
  background-color: var(--card-bg);
  border-radius: 8px;
  padding: 16px;
}

.action-buttons {
  display: flex;
  gap: 32px;
  justify-content: center;
  align-items: center;
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 8px 16px;
  transition: all 0.3s ease;
  border-radius: 6px;
}

.action-btn:hover {
  background-color: var(--hover-color);
  color: var(--bilibili-pink);
}

.action-btn.active {
  color: var(--bilibili-pink);
}

.action-btn i {
  font-size: 20px;
}

.action-btn span {
  font-size: 14px;
}

/* 分割线 */
.divider {
  height: 1px;
  background-color: var(--border-color);
  width: 100%;
}

/* UP主信息 */
.up-info {
  display: flex;
  align-items: center;
  gap: 16px;
  background-color: var(--card-bg);
  border-radius: 8px;
  padding: 16px;
}

.up-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

.up-details {
  flex: 1;
}

.up-name {
  font-size: 16px;
  font-weight: bold;
  color: var(--text-color);
  margin-bottom: 4px;
}

.up-followers {
  font-size: 14px;
  color: var(--text-secondary);
}

.follow-btn {
  padding: 8px 24px;
  background-color: var(--bilibili-pink);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.follow-btn:hover {
  background-color: #e06187;
}

.follow-btn.following {
  background-color: var(--hover-color);
  color: var(--text-secondary);
}

/* 视频简介 */
.video-description {
  background-color: var(--card-bg);
  border-radius: 8px;
  padding: 16px;
}

.description-content {
  font-size: 14px;
  color: var(--text-color);
  line-height: 1.6;
}

.description-content h3 {
  font-size: 16px;
  font-weight: bold;
  margin: 12px 0 8px 0;
  color: var(--text-color);
}

.description-content br {
  margin-bottom: 8px;
}

.list-item {
  margin-left: 16px;
}

.expand-btn {
  background: none;
  border: none;
  color: var(--bilibili-pink);
  cursor: pointer;
  font-size: 14px;
  margin-top: 12px;
  padding: 4px 0;
}

.expand-btn:hover {
  text-decoration: underline;
}

/* 评论区 */
.comments-section {
  background-color: var(--card-bg);
  border-radius: 8px;
  padding: 20px;
}

.comments-header h2 {
  font-size: 20px;
  font-weight: bold;
  color: var(--text-color);
  margin-bottom: 20px;
}

/* 评论输入框 */
.comment-input-area {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.comment-input-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.comment-input {
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
  resize: vertical;
  background-color: var(--input-bg);
  color: var(--text-color);
}

.comment-input:focus {
  outline: none;
  border-color: var(--bilibili-pink);
}

.comment-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.emoji-actions {
  display: flex;
  gap: 8px;
}

.emoji-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.emoji-btn:hover {
  background-color: var(--hover-color);
}

.submit-comment-btn {
  padding: 8px 24px;
  background-color: var(--bilibili-pink);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-comment-btn:hover:not(:disabled) {
  background-color: #e06187;
}

.submit-comment-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

/* 评论列表 */
.comments-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.comment-item {
  display: flex;
  gap: 12px;
}

.comment-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.comment-content-wrapper {
  flex: 1;
}

.comment-user-info {
  display: flex;
  gap: 12px;
  margin-bottom: 6px;
}

.comment-username {
  font-size: 14px;
  font-weight: bold;
  color: var(--text-color);
}

.comment-time {
  font-size: 12px;
  color: var(--text-secondary);
}

.comment-content {
  font-size: 14px;
  color: var(--text-color);
  line-height: 1.6;
  margin-bottom: 8px;
}

.comment-actions {
  display: flex;
  gap: 20px;
}

.comment-action-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.comment-action-btn:hover {
  background-color: var(--hover-color);
  color: var(--bilibili-pink);
}

/* 评论回复 */
.comment-replies {
  margin-top: 12px;
  padding-left: 20px;
  border-left: 2px solid var(--border-color);
}

.reply-item {
  margin-bottom: 8px;
  font-size: 13px;
}

.reply-username {
  font-weight: bold;
  color: var(--text-color);
}

.reply-content {
  color: var(--text-color);
}

.show-more-replies {
  background: none;
  border: none;
  color: var(--bilibili-pink);
  cursor: pointer;
  font-size: 12px;
  padding: 4px 0;
}

.show-more-replies:hover {
  text-decoration: underline;
}

/* 加载更多评论 */
.load-more-comments {
  width: 100%;
  padding: 12px;
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  border-radius: 4px;
  margin-top: 20px;
  transition: all 0.3s ease;
}

.load-more-comments:hover {
  background-color: var(--hover-color);
  color: var(--text-color);
}

/* 右侧推荐视频 */
.recommended-videos {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.recommended-videos h3 {
  font-size: 18px;
  font-weight: bold;
  color: var(--text-color);
}

.recommended-video-item {
  display: flex;
  gap: 12px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  padding: 8px;
  border-radius: 6px;
}

.recommended-video-item:hover {
  background-color: var(--hover-color);
}

.rec-video-thumbnail {
  position: relative;
  width: 120px;
  height: 68px;
  flex-shrink: 0;
}

.rec-video-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.rec-video-duration {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 4px;
  border-radius: 2px;
  font-size: 10px;
}

.rec-video-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rec-video-title {
  font-size: 14px;
  color: var(--text-color);
  line-height: 1.3;
  display: -webkit-box;
  display: box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rec-video-author {
  font-size: 12px;
  color: var(--text-secondary);
}

.rec-video-stats {
  font-size: 12px;
  color: var(--text-secondary);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .video-content {
    grid-template-columns: 1fr 280px;
    gap: 16px;
  }
}

@media (max-width: 992px) {
  .video-content {
    grid-template-columns: 1fr;
  }
  
  .recommended-videos {
    order: -1;
  }
  
  .video-player-wrapper {
    min-height: 360px;
  }
}

@media (max-width: 768px) {
  .video-header h1 {
    font-size: 20px;
  }
  
  .action-buttons {
    gap: 16px;
  }
  
  .video-player-wrapper {
    min-height: 280px;
  }
}

@media (max-width: 576px) {
  .video-content {
    padding: 12px;
  }
  
  .video-header h1 {
    font-size: 18px;
  }
  
  .video-player-wrapper {
    min-height: 200px;
  }
  
  .up-info {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .follow-btn {
    width: 100%;
  }
  
  .rec-video-thumbnail {
    width: 100px;
    height: 56px;
  }
}
</style>